<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
     xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:pm="http://primefaces.org/mobile">

    <f:view renderKitId="PRIMEFACES_MOBILE" />
    
    <h:head>
      <style type="text/css">
          .ui-grid-a div {
              padding: 0em 0.5em;
          }
          
          .ui-bar, .ui-body {
			    clear: both;
			    display: block;
			    overflow: hidden;
			    padding: 0em 0.5em;
			    position: relative;
			}
		
	

      </style>
    </h:head>
     
    <h:body>
	
	<pm:page id="cartelas">
	    <pm:header title="Minhas Cartelas" swatch="b">
            <p:button outcome="pm:home" value="Voltar" icon="ui-icon-arrow-l" styleClass="ui-btn-left ui-btn-inline"/>
        </pm:header>
	     
	    <pm:content>
	    	<h:form id="formCartelas">
	    		<pm:field>
				 	<h:outputText value="Grupo de Cartelas: "/>
			 		<p:selectOneMenu value="#{bBLoteca.grupoCartela}" id="grupoCartelaID" converter="grupoCartelaConverter" rendered="#{not empty bBLoteca.gruposCartelas}">
			 			<p:ajax event="change" update="formCartelas" listener="#{bBLoteca.selecionaGrupoCartela}"></p:ajax>
			            <f:selectItems value="#{bBLoteca.gruposCartelas}" var="gc"  itemLabel="#{gc.nome}" itemValue="#{gc}"/>
			        </p:selectOneMenu>
		       </pm:field>
		        <ui:repeat var="c" value="#{bBLoteca.cartelas}">
		        
				 	<h:dataTable var="pt" value="#{c.palpites}" rowIndexVar="index" paginator="false" width="100%" 
				 	style="border:1px solid #f0f0f0; font-size:0.7em;" rendered="#{not empty c.palpites}" >
				 		<f:facet name="header">
				 			<h:outputText value="Cartela #{c.seqCartela}"></h:outputText>
				 		</f:facet>
				 		
				 		<p:column style="text-align:center; #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
							<f:facet name="header">
								<h:outputText value=""/>
							</f:facet>
							<h:outputText value="#{pt.partida.sequencialJogo}"/>
							<f:facet name="footer">
				       			<h:outputText value="" style="font-weight:bold;"/>
				       			
				       		</f:facet>
						</p:column>
						<h:column style="text-align:center; #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
							<f:facet name="header">
								<h:outputText value="Coluna 1"/>
							</f:facet>
							<h:outputText value="#{pt.partida.time1.nome}" />
							<f:facet name="footer">
				       			<h:outputText value="" style="font-weight:bold;"/>
				       			
				       		</f:facet>
						</h:column>
						<p:column style="text-align:center; #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
							<f:facet name="header">
								<h:outputText value=""/>
							</f:facet>
							<pm:field><p:selectBooleanCheckbox value="#{pt.c1}" rendered="#{not c.concluida}"/></pm:field>
							<h:graphicImage value="/img/check_cinza_2.png" rendered="#{c.concluida and pt.c1}" style="width:18px;"/>
							<f:facet name="footer">
				       			<h:outputText value="" style="font-weight:bold;"/>
				       			
				       		</f:facet>
						</p:column>
						<p:column style="text-align:center;  #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
							<f:facet name="header">
								<h:outputText value=" X "/>
							</f:facet>
							<pm:field><p:selectBooleanCheckbox value="#{pt.cx}" rendered="#{not c.concluida}"/></pm:field>
							<h:graphicImage value="/img/check_cinza_2.png" rendered="#{c.concluida and pt.cx}" style="width:18px;"/>
							<f:facet name="footer">
				       			<h:outputText value="" style="font-weight:bold;"/>
				       		</f:facet>
						</p:column>
						<p:column  style="text-align:center; #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
							<f:facet name="header">
								<h:outputText value=""/>
							</f:facet>
							<pm:field><p:selectBooleanCheckbox value="#{pt.c2}" rendered="#{not c.concluida}"/></pm:field>
							<h:graphicImage value="/img/check_cinza_2.png" rendered="#{c.concluida and pt.c2}" style="width:18px;"/>
							<f:facet name="footer">
				       			<h:outputText value="" style="font-weight:bold;"/>
				       		</f:facet>
						</p:column>
						<p:column  style="text-align:center; #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
							<f:facet name="header">
								<h:outputText value="Coluna 2"/>
							</f:facet>
							<h:outputText value="#{pt.partida.time2.nome}"/>
							<f:facet name="footer">
				       			<h:outputText value="" style="font-weight:bold;"/>
				       		</f:facet>
						</p:column>
						<p:column  style="text-align:center; #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
							<f:facet name="header">
								<h:outputText value=""/>
							</f:facet>
							<h:graphicImage value="/img/erro.gif" rendered="#{not empty pt.acerto and not pt.acerto}" style="width:20px;"/>
							<h:graphicImage value="/img/sucess.png" rendered="#{pt.acerto}" style="width:18px;"/>
							<h:graphicImage value="/img/bola_rolando.gif" rendered="#{pt.partida.statusJogo eq 'EM_ANDAMENTO'}" style="width:20px;"/>
							<h:graphicImage value="/img/relogio.png" rendered="#{pt.partida.statusJogo eq 'AGENDADO'}" style="width:18px;"/>
							<h:graphicImage value="/img/apito.png" rendered="#{pt.partida.statusJogo eq 'FINALIZADO'}" style="width:20px;"/>
							<f:facet name="footer">
				       			<h:outputText value="" style="font-weight:bold;"/>
				       		</f:facet>
						</p:column>
				 	</h:dataTable>
				 </ui:repeat>
	    	</h:form>
	    </pm:content>
	</pm:page>
	
	</h:body>


</html>